<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Goplay.Net Websocket Client Demo</title>
    <script src="bundle.js"></script>
    <script>
        var PBString = GoPlay.Core.Protocols.PbString;
        var StatusCode = GoPlay.Core.Protocols.StatusCode;

        function writeLn() {
            if (arguments.length == 0) return;
            var line = "";
            for (var i = 0; i < arguments.length; i++) {
                if (typeof arguments[i] == "string") {
                    line += " " + arguments[i];
                } else {
                    line += " " + JSON.stringify(arguments[i]);
                }
            }

            var content = document.getElementById("content");
            var d = new Date();
            var dateStr = d.getFullYear() +
                "-" + ("0" + (d.getMonth() + 1)).slice(-2) +
                "-" + ("0" + d.getDate()).slice(-2) +
                " " + ("0" + d.getHours()).slice(-2) +
                ":" + ("0" + d.getMinutes()).slice(-2) +
                ":" + ("0" + d.getSeconds()).slice(-2);
            content.innerHTML = "[" + dateStr + "] " + line + "<br />" + content.innerHTML;
        }

        async function sendClicked() {
            var elem = document.getElementById("data");
            var data = elem.value;
            elem.value = "";

            if (!data || data.length == 0) return;
            data = PBString.create({"Value":data});
            // console.log(data);

            goplay.notify("test.notify", data);
            var {status, data} = await goplay.request("test.echo", data, PBString);
            if (status.Code == StatusCode.Success) {
                writeLn("Requst[test.echo] => ", status, data);
            } else {
                writeLn("<span style='color:red'>", "Requst[test.echo] => ", status, data, "</span>");
            }
            console.log("Requst[test.echo] => ", status, data);
        }

        async function requestError() {
            var elem = document.getElementById("data");
            var data = elem.value;
            elem.value = "";

            if (!data || data.length == 0) return;
            data = PBString.create({"Value":data});
            // console.log(data);

            var {status, data} = await goplay.request("test.err", data, PBString);
            if (status.Code == StatusCode.Success) {
                writeLn("Requst[test.err] => ", status, data);
            } else {
                writeLn("<span style='color:red'>", "Requst[test.err] => ", status, data, "</span>");
            }
            console.log("Requst[test.err] => ", status, data);
        }

        goplay.on(goplay.Consts.Events.CONNECTED, function() {
            console.log("websocket connected");
            writeLn("websocket connected");
        });

        goplay.on(goplay.Consts.Events.DISCONNECTED, function() {
            console.log("websocket disconnected");
            writeLn("websocket disconnected");
        });

        goplay.on("test.push", function (data) {
            console.log("on[test.push]: ", data);
            writeLn("on[test.push]: ", data);
        });

        goplay.onType("test.push", PBString, function (data) {
            console.log("onType[test.push]: ", data);
            writeLn("onType[test.push]: " + data.Value);
        });

        async function connect() {
            var url = document.getElementById("url").value;
            var ok = await goplay.connect(url);
            console.log("goplay connected => ", ok);
            writeLn("goplay connected => " + ok);

            document.getElementById("btnConnect").disabled = goplay.isConnected;
            document.getElementById("btnDisconnect").disabled = !goplay.isConnected;
            document.getElementById("btnSend").disabled = !goplay.isConnected;
            document.getElementById("btnError").disabled = !goplay.isConnected;
        }

        function disconnect() {
            goplay.disconnect();

            document.getElementById("btnConnect").disabled = goplay.isConnected;
            document.getElementById("btnDisconnect").disabled = !goplay.isConnected;
            document.getElementById("btnSend").disabled = !goplay.isConnected;
            document.getElementById("btnError").disabled = !goplay.isConnected;
        }
    </script>
</head>

<body>
    <div>
        <input id="url" type="text" name="url" value="wss://localhost:8888" />
        <input id="btnConnect" type="button" value="Connect" onclick="javascript:connect();" />
        <input id="btnDisconnect" type="button" value="Disconnect" onclick="javascript:disconnect();" disabled />
    </div>
    <div>
        <input id="data" type="text" name="data" />
        <input id="btnSend" type="button" value="Send" onclick="javascript:sendClicked();" disabled />
        <input id="btnError" type="button" value="Test Error" onclick="javascript:requestError();" disabled />
    </div>
    <p id="content">

    </p>
</body>

</html>